<template>
	<view class="daka">
		<view :class="[!checkdaka?'top-wrapff':'top-wrap']">
			<view class="top-box">
				<view class="icon-desc">今日学习主题</view>
				<view class="scrl-wrap " :class="[!checkdaka?'scrl2':'']" @click="fnDaKaClick">
					{{dakadesc}}
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="head-wrap">
				<view class="head-box">
					<image class="head-img" :src="classInfo.classImg||classInfo.tch_headimg"></image>
					<view class="nickname">{{classInfo.tch_name||classInfo.tch_nickname}}</view>
					<view class="icon-flower">
						<vs-icon type="icon-flower" size="20"></vs-icon>
					</view>
				</view>
				<view class="head-box">
					<view  class="listwrap" v-for="(item,index) in iconList" :key="index">
						<button @click="fnShareMessage" v-if="index==4"  class="i-list-icon s-btn">
							<vs-icon :type="item.icon" size="30"></vs-icon>
						</button>
						<view v-else  class="i-list-icon">
							<vs-icon :type="item.icon" size="30"></vs-icon>
						</view>
						
						<view class="i-desc">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="i-list">
			<block   v-for="(item,index) in videoList.list" :key="index" >
				<ThedakeList  :itemInfo="item" ></ThedakeList>
			</block>
		</view>
		<view v-if="!videoList.flag" style="width: 100%;background-color: #ebecf1;
		display: block;text-align: center;padding: 10px 0;font-size: 14px;color:#888">
			没有更多了
		</view>
	</view>
</template> 

<script>
	import ThedakeList from '../../compoments/ThedakaList.vue'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		components:{
			ThedakeList
			
		},
		data() {
			return {
				classInfo:'',
				dakadesc:'',
				//videoList:'',
				checkdaka:false,
				videoList:{
					pageNum:1,
					pageSize:10,
					flag:true,
					list:[]
				},
				statusBarHeight:statusBarHeight,
				iconList:[
					{name:'消息',icon:'icon-xiaoxi'},
					{name:'排行榜',icon:'icon-paihangbang1'},
					{name:'管理班级',icon:'icon-fenlei1'},
					{name:'日历',icon:'icon-rili1'},
					{name:'邀请同学',icon:'icon-fenxiang'}
				]
			}
		},
		onShow() {
			uni.showLoading({
				title:'加载中...'
			})
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
			this.videoList.pageNum=1
			this.videoList.list=[]
			this.videoList.flag=true
			this.classInfo=this.$store.state.classInfo
			//console.log(this.$store.state.classInfo)
			this.fnCheckdata()
			this.fnGetDakainfoList()
			this.fnGetstudent()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.videoList.pageNum=1
			this.videoList.list=[]
			this.videoList.flag=true
			this.fnGetDakainfoList()
		},
		onReachBottom() {
			this.fnGetDakainfoList()
		},
		methods: {
			fnShareMessage(){
				uni.navigateTo({
					url:'../share/share?wkid='+this.classInfo.wk_id+'&classname='+this.classInfo.wk_className
				})
				
			},
			fnDaKaClick(){
				//console.log('55555555555555555555')
				if(this.checkdaka){
					uni.navigateTo({
						url:'../new-dakaInfo/dakaInfo'
					})
				}
			},
			fnCheckdata(){
				let params={
					wkid:this.classInfo.wk_id,
					 userid:uni.getStorageSync('userInfo').userid
				} 
				this.$fun.request(params,'php/xcx_disabledaka.php').then(res=>{
					console.log(res)
					if(res.data==0){
						this.dakadesc='打卡'
						this.checkdaka=true
						
					}else{
						this.dakadesc='已打卡'
						this.checkdaka=false
						uni.setNavigationBarColor({
							 frontColor: '#ffffff',
						    backgroundColor: '#00ff00',
							animation: {
							        duration: 400,
							        timingFunc: 'easeIn'
							    }
						})
						
					}
				})
				
			},
			fnGetstudent(){
				let params={
					userid:uni.getStorageSync('userInfo').userid,
					wkid:this.classInfo.wk_id
				}
				this.$fun.request(params,'php/xcx_getstudents.php').then(res=>{
					console.log(res)
					this.$store.state.studentInfo=res.data[0]
				})
			},
			fnGetDakainfoList(){//获取学生打卡列表，后台已过滤
				//console.log(this.videoList.flag)
				if(!this.videoList.flag){return;}
						let params={
							rqtype:'wksource',
							userid:uni.getStorageSync('userInfo').userid,
							wkid:this.$store.state.classInfo.wk_id,
							pageNum:this.videoList.pageNum,
							pageSize:this.videoList.pageSize
						}
						console.log(params)
						this.$fun.request(params,'php/xcx_getmyvideos.php').then(res=>{
							console.log(res)
							//let
							if(res.data.length==0){
								this.videoList.flag=false
								//console.log(889)
								return;
							}
							
							let arr=res.data.map(v=>{
								let mm=JSON.parse(v.video_url)
								if(mm.videourl){mm.videourl=this.$http+mm.videourl}
								if(mm.imgurl){mm.imgurl=this.$http+mm.imgurl}
								v.video_url=mm
								//v.
								return v;
							})
							let list=[...this.videoList.list,...arr]
							console.log(this.videoList.list)
							// if(!this.checkdaka){//判断是否打卡
							// 	let aa=list.filter(v=>v.user_id=uni.getStorageSync('userInfo').userid)
							// 	if(aa.length>0){
							// 		this.checkdaka=true
							// 		}
							// }
							setTimeout(()=>{
								this.videoList.list=list
								this.videoList.pageNum++
								//console.log(this.videoList.pageNum)
							},500)
						})
					
				
			}
		}
	}
</script>

<style lang="scss">
	.daka{
		width: 100%;
		//height: 100%;
		display: flex;
		//background-color: #4CD964;
		flex-direction: column;
		//overflow-y: scroll;
		//align-items: center;
		.i-list{
			width: 100%;
		//	background-color: #2149ff;
			display: flex;
			flex-direction: column;
			margin-top: 10px;
		}
		.top-wrap{
			width: 100%;
			height: 200px;  
			position: relative;  
			left: 0;
			display: flex;
			justify-content: center;
			overflow: hidden;
			background-color: #fff;
			&::after{
				//background-color: #007AFF;
				content: "";
				width: 140%;
				height: 200px;
				position: absolute;
				//left: 20%;
				top: 0;
				border-radius: 0 0 50% 50%;
				background-image: linear-gradient(#ffb84d,#ff9900);
				}
			.top-box{
				width: 100%;
				height: 200px;
				//background-color: #4CD964;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				z-index: 100;
				top: 0;
				.icon-desc{
					margin-top: 10px;
					color: #fff;
					
					
				}
				
				.scrl-wrap{
					width: 80px;
					height: 80px;
					border-radius: 100%;
					background-color: #ff9900;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 5px solid #fff;
					position: absolute;
					bottom: 30px;
					font-size: 26px;
					color: #fff;
					box-shadow: 0 0 10px #fff;
					overflow: hidden;
					z-index: 10;
					&:active{
						background-color: #ffad33;
					}
					
				}
				
			}
		}
		.top-wrapff{
			width: 100%;
			height: 200px;  
			position: relative;  
			left: 0;
			display: flex;
			justify-content: center;
			overflow: hidden;
			background-color: #fff;
			&::after{
				//background-color: #007AFF;
				content: "";
				width: 140%;
				height: 200px;
				position: absolute;
				//left: 20%;
				top: 0;
				border-radius: 0 0 50% 50%;
				background-image: linear-gradient(#00ff00,#00cc00);
				}
			.top-box{
				width: 100%;
				height: 200px;
				//background-color: #4CD964;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				z-index: 100;
				top: 0;
				.icon-desc{
					margin-top: 10px;
					color: #fff;
					
					
				}
				
				.scrl-wrap{
					width: 80px;
					height: 80px;
					border-radius: 100%;
					background-color: #00cc00;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 5px solid #fff;
					position: absolute;
					bottom: 30px;
					font-size: 26px;
					color: #fff;
					box-shadow: 0 0 10px #fff;
					overflow: hidden;
					z-index: 10;
					&:active{
						background-color: #00ff00;
					}
					
				}
				.scrl2{
					//background-color: #55ff00;
					font-size: 20px;
				}
			}
		}
		.content{
			width: 100%;
			//padding: 10px;
			//height: 100%;
			//background-color: #007AFF;
			//margin-top: 100px;
			display: flex;
			flex-direction: column;
			align-items: center;
			//box-sizing:content-box ;
			box-shadow: 5px 5px 10px #C0C0C0; 
			.head-wrap{
				width: 100%;
				//height: 100px;
				background: #fff;
				padding: 15px 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.head-box{
					width: 95%;
					//height: 50px;
					//background-color: #3F536E;
					//margin: 10px 0;
					display: flex;
					align-items: center;
					.head-img{
						width: 40px;
						height: 40px;
						border-radius: 100%;
					//	background-color: #4CD964;
					}
					.nickname{
						margin-left: 10px;
						font-size: 16px;
						color: #803f00;
					}
					.icon-flower{
						width: 30px;
						height: 30px;
						//background-color: #4CD964;
						margin-left: 10px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #803f00;
						
					}
					.listwrap{
						width: 20%;
						//background-color: #2C405A;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 10px;
						color: #ac3939;
						.i-list-icon{
							// width: 40px;
							// height: 40px;
							//background-color: #007AFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.s-btn{
							background: rgba(0,0,0,0);
							padding: 0;
							line-height: 30px;
							color: #ac3939;
							&::after{
								border: 0;
							}
						}
						.i-desc{
							//padding-top: 2px;
						
							font-size: 14px;
							//background-color: #4CD964;
						}
					}
				}
			}
			
			
			
		}
		
	}

</style>
